<template>
  <div class="flex-vertical-stretch gap-16px overflow-hidden <sm:overflow-auto">
    <UserSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getData" :show-search="showSearch"/>
    <NCard title="" :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <template #header>
        <NSpace wrap justify="end" class="<sm:w-200px">
          <NButton size="small" type="primary" @click="handleAdd">
            <template #icon>
              <icon-ic-round-plus class="text-icon"/>
            </template>
            {{ $t('common.add') }}
          </NButton>
        </NSpace>
      </template>
      <NDataTable
        :bordered="false"
        :single-line="false"
        v-model:checked-row-keys="checkedRowKeys"
        :columns="columns"
        :data="data"
        size="small"
        :flex-height="!appStore.isMobile"
        :scroll-x="640"
        :loading="loading"
        :pagination="pagination"
        :row-key="item => item.id"
        class="sm:h-full"
      />
      <UserOperateDrawer
        v-model:visible="drawerVisible"
        :operate-type="operateType"
        :row-data="editingData"
        @submitted="getData"
      />
    </NCard>
  </div>
</template>
<script setup lang="tsx">
import {ref} from 'vue';
import {NButton, NPopconfirm} from 'naive-ui';
import {useBoolean, useLoading} from '@sa/hooks';
import {useAppStore} from '@/store/modules/app';
import {$t} from '@/locales';
import UserSearch from './user-search.vue';
import UserOperateDrawer from "@/views/users/user-operate-drawer.vue";
import {fetchGetUserList} from "@/service/api/users";


defineOptions({name: 'UserList'})
const showSearch = ref(false);
const {loading} = useLoading();
const {bool: drawerVisible, setTrue: openDrawer} = useBoolean();
const appStore = useAppStore();
const data = ref<Api.Entity.User[]>([]);
const searchParams = ref({});
const resetSearchParams = ref({})
const filterColumns = ref([])
const pagination = ref({
  pageSize: 15,
  pageNumber: 1,
  searchProperty: null,
  searchValue: null,
  orderProperty: null,
  orderDirection: null,
  filters: null
});
const columns = ref([
  {
    type: 'selection',
    align: 'center',
    width: 48
  },
  {
    key: 'phoneNumber',
    title: '手机号码',
    align: 'center',
    minWidth: 100
  },
  {
    key: 'email',
    title: '邮箱',
    align: 'center',
    minWidth: 200
  },
  {
    key: 'nickName',
    title: $t('page.manage.user.nickName'),
    align: 'center',
    minWidth: 100
  },
  {
    key: 'operate',
    title: $t('common.operate'),
    align: 'center',
    width: 130,
    render: row => (
      <div class="flex-center gap-8px">
        <NButton type="primary" ghost size="small" onClick={() => handleEdit(row.id)}>
          {$t('common.edit')}
        </NButton>
        <NPopconfirm onPositiveClick={() => handleDelete(row.id)}>
          {{
            default: () => $t('common.confirmDelete'),
            trigger: () => (
              <NButton type="error" ghost size="small">
                {$t('common.delete')}
              </NButton>
            )
          }}
        </NPopconfirm>
      </div>
    )
  }
]);

async function getData() {
  let res = await fetchGetUserList(searchParams.value);
  data.value = res.data?.content || [];
}

const operateType = ref<Api.Common.OperateType>('add');

function handleAdd() {
  operateType.value = 'add';
  openDrawer();
}

const checkedRowKeys = ref<string[]>([]);

const editingData = ref<Api.Entity.User | null>(null);

function handleEdit(id: number) {
  operateType.value = 'edit';
  editingData.value = data.value.find(item => item.id === id) || null;
  openDrawer();
}

async function handleDelete(id: number) {
  window.$message?.success($t('common.deleteSuccess'));
  await getData();
}

getData()
</script>

<style scoped>
:deep(.n-card__content) {
  padding: 0 !important;
}

.flex-vertical-stretch {
  height: calc(100vh - 135px);
}

</style>
